<template>
  <div class="yuce-canshu">
    <!-- <div style="text-align: center; margin: 10px 0; font-size: 16px; font-weight: bold">回采工作面涌水量预测</div> -->
    <div
      style="
        text-align: center;
        margin: 10px 0;
        font-size: 16px;
        font-weight: bold;
      "
    >
      涌水量预测公式：Q=1.336K(2HM - M² - hw²) / (lgR0 - lgr0)
    </div>
    <el-form :model="formObject" :rules="rules" ref="form" label-width="100px">
      <el-row>
        <el-col :span="6" style="margin-top: 8px">
          <el-form-item
            label="工作面名称"
            class="myitem"
            label-width="85px"
            prop="workingAreaName"
          >
            <!-- <el-input
              class="input-item"
              placeholder="请输入"
              v-model="formObject.workingAreaName"
            ></el-input> -->
            <el-select v-model="formObject.workingAreaName"
             placeholder="请选择"  style="width: 97%;">
<el-option v-for="item in selectData" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="渗透系数（K）"
            label-width="105px"
            prop="permeability"
          >
            <el-input
              class="input-item"
              placeholder="请输入"
              v-model.number="formObject.permeability"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="承压水头高度（H）"
            label-width="130px"
            prop="pressureHeadHeight"
          >
            <el-input
              class="input-item"
              placeholder="请输入"
              v-model.number="formObject.pressureHeadHeight"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="含水层厚度（M）"
            label-width="120px"
            prop="waterLayerThickness"
          >
            <el-input
              class="input-item"
              placeholder="请输入"
              v-model.number="formObject.waterLayerThickness"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item
            label="水位降深（S）"
            label-width="105px"
            prop="waterLevelDecrease"
          >
            <el-input
              class="input-item"
              placeholder="请输入"
              v-model.number="formObject.waterLevelDecrease"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="影响半径（R0）"
            label-width="110px"
            prop="impactRadius"
          >
            <el-input
              class="input-item"
              placeholder="请输入"
              v-model.number="formObject.impactRadius"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="引用半径（r0）"
            label-width="110px"
            prop="referenceRadius"
          >
            <el-input
              class="input-item"
              placeholder="请输入"
              v-model.number="formObject.referenceRadius"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="动水位至底板隔水层水柱高度（hw）"
            label-width="220px"
            prop="waterColumnHeight"
          >
            <el-input
              class="input-item"
              placeholder="请输入"
              v-model.number="formObject.waterColumnHeight"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="text-align: center">
      <el-button type="primary" @click="submitForm">开始预测</el-button>
      <div v-if="result != null" style="margin-top: 10px; font-size: 24px">
        涌水量（Q）<span style="font-size: 36px; color: skyblue">{{
          result
        }}</span
        >m³/d
      </div>
    </el-row>
  </div>
</template>

<script>
import axios from "@/utils/request";
import { number } from "echarts";
export default {
  data() {
    return {
      formObject: {},
      rules: {
        workingAreaName: [
          { required: true, message: "请输入工作面名称", trigger: "change" },
          // {
          //   min: 2,
          //   max: 10,
          //   message: "工作面名称长度在 2 到 10 个字符",
          //   trigger: "change",
          // },
        ],
        permeability: [
          { required: true, message: "请输入渗透系数", trigger: "blur" },
          { type: "number", message: "请输入数字", trigger: "blur" },
        ],
        pressureHeadHeight: [
          { required: true, message: "请输入承压水头高度", trigger: "blur" },
          { type: "number", message: "请输入数字", trigger: "blur" },
        ],
        waterLayerThickness: [
          { required: true, message: "请输入含水层厚度", trigger: "blur" },
          { type: "number", message: "请输入数字", trigger: "blur" },
        ],
        waterLevelDecrease: [
          { required: true, message: "请输入水位降深", trigger: "blur" },
          { type: "number", message: "请输入数字", trigger: "blur" },
        ],
        impactRadius: [
          { required: true, message: "请输入影响半径", trigger: "blur" },
          { type: "number", message: "请输入数字", trigger: "blur" },
        ],
        referenceRadius: [
          { required: true, message: "请输入引用半径", trigger: "blur" },
          { type: "number", message: "请输入数字", trigger: "blur" },
        ],
        waterColumnHeight: [
          {
            required: true,
            message: "请输入动水位至底板隔水层水柱高度",
            trigger: "blur",
          },
          { type: "number", message: "请输入数字", trigger: "blur" },
        ],
      },
      result: null,
      selectData:[]
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formObject.workingAreaName =
            this.formObject.workingAreaName.trim();
          this.formObject.permeability = Number(this.formObject.permeability);
          this.formObject.pressureHeadHeight = Number(
            this.formObject.pressureHeadHeight
          );
          this.formObject.waterLayerThickness = Number(
            this.formObject.waterLayerThickness
          );
          this.formObject.waterLevelDecrease = Number(
            this.formObject.waterLevelDecrease
          );
          this.formObject.impactRadius = Number(this.formObject.impactRadius);
          this.formObject.referenceRadius = Number(
            this.formObject.referenceRadius
          );
          this.formObject.waterColumnHeight = Number(
            this.formObject.waterColumnHeight
          );
          this.formObject.pressureHeadHeight = Number(
            this.formObject.pressureHeadHeight
          );
          axios
            .get("/transgeology/disaster/water/getGushingPredict", {
              params: this.formObject,
            })
            .then((res) => {
              if (res.code == 500) {
                this.$message.error(res.msg);
              } else if (res.code == 200) {
                this.result = res.data;
              }
            });
        } else {
          this.$message.error("请检查输入项");
        }
      });
    },
    getList() {
      axios.post("/transgeology/basic/workarea/listNoPage", {}).then((res) => {
        if (res.data) {
          this.selectData = res.data.map((item) => {
            return { label: item.workingFaceName, value: item.workingFaceCode };
          });
   
        }
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped  lang="scss">
.yuce-canshu {
  height: 100%;
}
.input-item {
  margin-top: 10px;
  width: 97%;
}
// .myitem{
//   display: flex;
//   flex-direction: column;
//   .custom-form-item .el-form-item__label {
//   margin-bottom: 10px; /* 调整 label 和 content 之间的间距 */
// }

// .custom-form-item .el-form-item__content {
//   margin-top: 5px; /* 调整 content 和下一个表单项之间的间距 */
//   margin: 0 !important;
// }

// }
::v-deep .el-form-item__content {
  margin: 0 !important;
}
</style>
<style scoped lang="scss">
::v-deep .el-input--medium .el-input__inner {
  color: rgba(255, 255, 255, 1);
  background: #103865 !important;
  border: 1px solid #103865 !important;
}
::v-deep .el-form-item__label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}
</style>
<style>
.el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
/* 谷歌 */
.el-input__inner::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
/* 火狐 */
.el-input__inner:-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
/*ie*/
.el-input__inner:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
</style>